<template>
  <el-dialog :title="!dataForm.id ? '新建' :'编辑'" :close-on-click-modal="false" append-to-body :visible.sync="visible"
    class="JNPF-dialog JNPF-dialog_center" lock-scroll width="600px">
    <el-row :gutter="15" class="">
      <el-form ref="elForm" :model="dataForm" :rules="rules" size="small" label-width="100px" label-position="right">
        <template v-if="!loading">
          <el-col :span="24">
            <el-form-item label="分类名称" prop="name">
              <el-input v-model="dataForm.name" placeholder="请输入分类名称" :maxlength="10" clearable
                :style='{"width":"100%"}' show-word-limit>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="排序" prop="sortcode">
              <el-input v-model="dataForm.sortcode" placeholder="数字越大，排名越靠前" :style='{"width":"100%"}' type="number" step="1" oninput="value=value.replace(/^(0+)|[^\d]+/g,'')">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="分类图标" prop="icon">
              <JNPF-UploadImg v-model="dataForm.icon" :fileSize="5" sizeUnit="MB" :limit="1" :detailed="dataForm.icon.length == 1">
              </JNPF-UploadImg>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="是否启用" prop="showmark">
              <el-switch v-model="dataForm.showmark" active-value="1" inactive-value="0">
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="dataForm.remark" placeholder="请输入内容" :maxlength="50" :style='{"width":"100%"}' true
                type="textarea" :autosize='{"minRows":4,"maxRows":4}' show-word-limit>
              </el-input>
            </el-form-item>
          </el-col>
        </template>
      </el-form>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dataFormSubmit()" :loading="btnLoading"> 确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
  import { getAssoSupplyType, addAssoSupplyType, updateAssoSupplyType } from '@/api/asso/supply/category'

  export default {
    name: 'assosupplycategoryForm',
    components: {},
    props: [],
    data() {
      return {
        visible: false,
        loading: false,
        btnLoading: false,
        dataForm: {
          name: '',
          sortcode: '',
          icon: [],
          showmark: '1',
          remark: '',
        },
        rules: {
          name: [{
            required: true,
            message: '请输入分类名称',
            trigger: 'blur'
          }]
        },
      }
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {},
    methods: {
      // 清空数据
      clearData() {
        this.dataForm.name = '';
        this.dataForm.sortcode = '';
        this.dataForm.icon = [];
        this.dataForm.showmark = '1';
        this.dataForm.remark = '';
      },
      // 获取详情
      init(id) {
        this.dataForm.id = id || 0;
        this.visible = true;
        this.$nextTick(() => {
          this.$refs['elForm'].resetFields();
          if (this.dataForm.id) {
            this.loading = true
            getAssoSupplyType(this.dataForm.id).then((res) => {
              this.dataInfo(res.data)
              this.loading = false
            }).catch(() => {
              this.loading = false
            })
          } else {
            this.clearData()
          }
        });
        this.$store.commit('generator/UPDATE_RELATION_DATA', {})
      },
      // 表单提交
      dataFormSubmit() {
        this.$refs['elForm'].validate((valid) => {
          if (valid) {
            this.request()
          }
        })
      },
      request() {
        this.btnLoading = true
        let _data = this.dataList()
        if (!this.dataForm.id) {
          // 新增
          addAssoSupplyType(_data).then((res) => {
            this.$message({
              message: res.msg,
              type: 'success',
              duration: 1000,
              onClose: () => {
                this.visible = false
                this.btnLoading = false
                this.$emit('refreshSupplyCategory', true)
              }
            })
          }).catch(() => {
            this.btnLoading = false
          })
        } else {
          // 修改
          updateAssoSupplyType(this.dataForm.id, _data).then((res) => {
            this.$message({
              message: res.msg,
              type: 'success',
              duration: 1000,
              onClose: () => {
                this.visible = false
                this.btnLoading = false
                this.$emit('refreshSupplyCategory', true)
              }
            })
          }).catch(() => {
            this.btnLoading = false
          })
        }
      },
      dataList() {
        var _data = JSON.parse(JSON.stringify(this.dataForm));
        _data.icon = Array.isArray(_data.icon) ? JSON.stringify(_data.icon) : '[]'
        return _data;
      },
      dataInfo(dataAll) {
        let _dataAll = dataAll
        _dataAll.icon = _dataAll.icon ? JSON.parse(_dataAll.icon) : []
        this.dataForm = _dataAll
      },
    },
  }
</script>
